import React, { Component } from "react";
import { View, Text, Image, StyleSheet, FlatList, TouchableWithoutFeedback } from "react-native";
import * as RootNavigation from '../../../App'

export default class AddressList extends Component{
  constructor(props) {
    super(props);
    this.state={
      dataList:[{
        label:'1',
        value:1
      },{
        label:'2',
        value:2
      },{
        label:'3',
        value:3
      }]
    }
  }

  editAddress(){
    RootNavigation.navigate('AddAddress',{})
  }

  _renderItem=()=>{
    return (
      <TouchableWithoutFeedback onPress={this.editAddress}>
        <View style={styles.cell}>
          <Text style={styles.address}>北京市西城区西单北大街131号</Text>
          <Text style={styles.name}>宋润生  180****5678</Text>
          <View style={styles.cellFooter}>
            <View style={styles.flex}>
              <Image style={{width:18,height:18}} source={require('../../img/selected_icon.png')}></Image>
              <Text style={styles.btnTitle}>默认地址</Text>
            </View>
            <View style={styles.flex}>
              <View style={styles.flex}>
                <Image style={{width:12,height:12}} source={require('../../img/edit_icon.png')}></Image>
                <Text style={styles.btnTitle}>编辑</Text>
              </View>
              <View style={[styles.flex,{marginLeft:23}]}>
                <Image style={{width:11,height:12}} source={require('../../img/delete_icon.png')}></Image>
                <Text style={styles.btnTitle}>删除</Text>
              </View>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  _renderItemSeparator=()=>{
    return (
      <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
    )
  }
  render() {
    return(
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <FlatList style={styles.table} data={this.state.dataList}
                  keyExtractor={(item)=>item.value}
                  ItemSeparatorComponent={this._renderItemSeparator}
                  renderItem={this._renderItem}></FlatList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  cell:{
    width:'100%',
    backgroundColor:'#fff',
    paddingHorizontal:14,
    paddingTop:19,
    borderRadius:7
  },
  address:{
    color:'#222222',
    fontSize: 16,
    fontWeight:'500'
  },
  name:{
    color:'#333333',
    fontSize:12,
    marginTop:12
  },
  cellFooter:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    height:40,
    borderTopColor:'#F6F6F6',
    borderTopWidth:1,
    borderTopStyle:'solid',
    marginTop:17
  },
  flex:{
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  btnTitle:{
    color:'#999999',
    fontSize:13,
    marginLeft:8
  },
  table:{
    paddingHorizontal:12,
    paddingVertical:15
  }
})
